<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.show {
				display: block;
			}

			.hide {
				display: none;
			}
			
		
		</style>
	</head>
	<body>

		<!-- 视图 -->
		<div id="app">
			
			
			<!-- v-if 通过 添加 和移除 节点 控制是否显示 
				
				如果需要频繁的 显隐  dom节点非常复杂，效率不高 适合于dom节点不是特别的复杂，不需要频繁的显示和隐藏
			   
			-->
			
			<p  v-if="show">段落信息1 </p>	
			
			
			
			<!-- v-show 通过 控制 display属性达到显隐的目的 
				适合于 在 需要初始化的场景下使用	
			 -->
			<p  v-show="show">段落信息2 </p>	


			
			<input type="radio" value="1" v-model="gender">男    
			<input type="radio" value="2"  v-model="gender">女 
			 <input type="radio"value="3" v-model="gender">未知
			
			
			<p v-if="gender==1">男性</p>
			<p v-else-if="gender==2">女性</p>
			<p v-else="gender==1">未知</p>	


		</div>



		<!-- 把 vuejs管理的数据跟 视图进行双向绑定-->
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					show: false,
					gender:1
				}
			})
		</script>



	</body>
</html>
